<template>
    <div class="box">
        <t-row class="header" :gutter="10">
            <t-col :span="3">
                <t-card>
                    <!-- 标题区域 -->
                    <div class="title">
                        <span>销售额</span>
                        <InfoCircleIcon />
                    </div>
                    <!-- 数字区域 -->
                    <div class="number">
                        <span>126,530</span>
                    </div>
                    <!-- 比例变化区域 -->
                    <div class="change">
                        <t-row>
                            <t-col :span="6">
                                <span>周同比</span>
                                <CaretUpSmallIcon />
                                12%
                            </t-col>
                            <t-col :span="6">
                                <span>日环比</span>
                                <CaretDownSmallIcon />
                                11%
                            </t-col>
                        </t-row>
                    </div>
                    <!-- 分割线 -->
                    <t-divider></t-divider>
                    <!-- 尾部区域 -->
                    日均销售额 &nbsp; ¥&nbsp;12,423
                </t-card>
            </t-col>
            <t-col :span="3">
                <t-card>
                    <!-- 标题区域 -->
                    <div class="title">
                        <span>订单数</span>
                        <InfoCircleIcon />
                    </div>
                    <!-- 数字区域 -->
                    <div class="number">
                        <span>8,846</span>
                    </div>
                    <!-- 2. 为 ECharts 准备一个定义了宽高的 DOM -->
                    <div id="main1" style="height:50px; width: 270px"></div>
                    <!-- 分割线 -->
                    <t-divider></t-divider>
                    <!-- 尾部区域 -->
                    日访问量 &nbsp; 10,199
                </t-card>
            </t-col>
            <t-col :span="3">
                <t-card>
                    <!-- 标题区域 -->
                    <div class="title">
                        <span>UV</span>
                        <InfoCircleIcon />
                    </div>
                    <!-- 数字区域 -->
                    <div class="number">
                        <span>8,846</span>
                    </div>
                    <!-- 2. 为 ECharts 准备一个定义了宽高的 DOM -->
                    <div id="main2" style="height:50px; width: 270px"></div>
                    <!-- 分割线 -->
                    <t-divider></t-divider>
                    <!-- 尾部区域 -->
                    转换率 &nbsp; 60%
                </t-card>
            </t-col>
            <t-col :span="3">
                <t-card>
                    <!-- 标题区域 -->
                    <div class="title">
                        <span>新增用户量</span>
                        <InfoCircleIcon />
                    </div>
                    <!-- 数字区域 -->
                    <div class="number">
                        <span>3,86</span>
                    </div>
                    <!-- 2. 为 ECharts 准备一个定义了宽高的 DOM -->
                    <div id="main3" style="height:50px; width: 270px"></div>
                    <!-- 分割线 -->
                    <t-divider></t-divider>
                    <!-- 尾部区域 -->
                    平均增长率 &nbsp; 52%
                </t-card>
            </t-col>
        </t-row>

        <t-card class="body">
            <t-tabs v-model="activeIndex" @change="handleChange">
                <t-tab-panel :value="1" label="销售额">
                    <t-row>
                        <t-col :span="8">
                            <h3>销售额趋势</h3>
                            <!-- 2. 为 ECharts 准备一个定义了宽高的 DOM -->
                            <div id="main4" style="height:380px; width: 770px"></div>
                        </t-col>
                        <t-col :span="4">
                            <h3 style="margin-top: 35px;">热门商品</h3>

                            <t-row class="ranking">
                                <t-col :span="2"><i class="iconfont icon-jinpai" style="color: red;"></i></t-col>
                                <t-col :span="7">华为Mate 60 Pro</t-col>
                                <t-col :span="3">￥6,999</t-col>
                            </t-row>
                            <t-row class="ranking">
                                <t-col :span="2"><i class="iconfont icon-paiming22"
                                        style="color: rgb(172, 165, 165);"></i></t-col>
                                <t-col :span="7">iPhone 15 Pro Max</t-col>
                                <t-col :span="3">￥10,999</t-col>
                            </t-row>
                            <t-row class="ranking">
                                <t-col :span="2"><i class="iconfont icon-disanming"
                                        style="color: rgb(203, 135, 32);"></i></t-col>
                                <t-col :span="7">MacBook Pro 2022款 14寸</t-col>
                                <t-col :span="3">￥14,999</t-col>
                            </t-row>
                            <t-row class="ranking">
                                <t-col :span="2"><i class="iconfont icon-a4"></i></t-col>
                                <t-col :span="7">iPad Pro 256G 太空灰</t-col>
                                <t-col :span="3">￥6,999</t-col>
                            </t-row>
                            <t-row class="ranking">
                                <t-col :span="2"><i class="iconfont icon-a5"></i></t-col>
                                <t-col :span="7">OPPO Find N3 Flip</t-col>
                                <t-col :span="3">￥6,799</t-col>
                            </t-row>
                            <t-row class="ranking">
                                <t-col :span="2"><i class="iconfont icon-a6"></i></t-col>
                                <t-col :span="7">iQOO Z8(8GB/256GB)</t-col>
                                <t-col :span="3">￥1,699</t-col>
                            </t-row>
                            <t-row class="ranking">
                                <t-col :span="2"><i class="iconfont icon-a7"></i></t-col>
                                <t-col :span="7">一加Ace 2 Pro（12GB/256GB）</t-col>
                                <t-col :span="3">￥2999</t-col>
                            </t-row>
                            <t-row class="ranking">
                                <t-col :span="2"><i class="iconfont icon-a8"></i></t-col>
                                <t-col :span="7">荣耀X50（8GB/128GB）</t-col>
                                <t-col :span="3">￥1399</t-col>
                            </t-row>
                            <t-row class="ranking">
                                <t-col :span="2"><i class="iconfont icon-a9"></i></t-col>
                                <t-col :span="7">荣耀90（12GB/256GB）</t-col>
                                <t-col :span="3">￥2499</t-col>
                            </t-row>
                            <t-row class="ranking">
                                <t-col :span="2"><i class="iconfont icon-a10"></i></t-col>
                                <t-col :span="7">苹果iPhone 15（128GB）</t-col>
                                <t-col :span="3">￥5999</t-col>
                            </t-row>
                        </t-col>
                    </t-row>
                </t-tab-panel>
                <t-tab-panel :value="2" label="访问量">
                </t-tab-panel>
            </t-tabs>
        </t-card>

    </div>
</template>

<script>
// 1. 引入Echarts
import * as echarts from 'echarts'

import {
    InfoCircleIcon,
    CaretUpSmallIcon,
    CaretDownSmallIcon
} from 'tdesign-icons-vue'

export default {

    components: {
        InfoCircleIcon,
        CaretUpSmallIcon,
        CaretDownSmallIcon
    },

    created() {

    },

    mounted() {
        // 3. 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('main1'));

        // 4. 指定图表的配置项和数据
        const option1 = {
            color: ["#3398DB"],
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "shadow"
                }
            },
            grid: {
                top: "0%",
                right: "0%",
                left: "0%",
                bottom: "0%",

            },
            xAxis: [{
                type: "category",
                data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
                show: false
            }],
            yAxis: [{
                type: "value",
                show: false

            }],
            series: [{
                name: "直接访问",
                type: "bar",
                barWidth: "60%",
                data: [10, 52, 200, 334, 390, 330, 220]
            }]
        }

        // 5. 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option1)




        // 3. 基于准备好的dom，初始化echarts实例
        var myChart2 = echarts.init(document.getElementById('main2'));

        const option2 = {
            legend: {
                top: 'bottom',
                data: ['意向']
            },
            tooltip: {
                triggerOn: 'none',
                alwaysShowContent: true,
                position: function (pt) {
                    return [pt[0], 130];
                }
            },
            xAxis: {
                show: false,
                type: 'time',
                axisPointer: {
                    value: '2016-10-7',
                    snap: true,
                    label: {
                        show: true,
                        formatter: function (params) {
                            return echarts.format.formatTime('yyyy-MM-dd', params.value);
                        }
                    },
                    handle: {
                        show: true
                    }
                },
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                show: false,
                type: 'value',
                axisTick: {
                    inside: true
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    inside: true
                },
                z: 10
            },
            grid: {
                top: 0,
                left: 0,
                right: 0,
                bottom: 0
            },
            series: [
                {
                    name: '模拟数据',
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 5,
                    sampling: 'lttb',
                    itemStyle: {
                        color: '#8ec6ad'
                    },
                    stack: 'a',
                    areaStyle: {},
                    data: [
                        ['2016-10-4', 130],
                        ['2016-10-5', 129],
                        ['2016-10-6', 123],
                        ['2016-10-7', 133],
                        ['2016-10-8', 134],
                        ['2016-10-9', 139],
                        ['2016-10-10', 145],
                        ['2016-10-11', 148],
                        ['2016-10-12', 141]
                    ]
                },
                {
                    name: '模拟数据',
                    type: 'line',
                    smooth: true,
                    stack: 'a',
                    symbol: 'circle',
                    symbolSize: 5,
                    sampling: 'lttb',
                    itemStyle: {
                        color: '#d68262'
                    },
                    areaStyle: {},
                    data: [
                        ['2016-10-4', 38],
                        ['2016-10-5', 39],
                        ['2016-10-6', 44],
                        ['2016-10-7', 53],
                        ['2016-10-8', 53],
                        ['2016-10-9', 54],
                        ['2016-10-10', 62],
                        ['2016-10-11', 66],
                        ['2016-10-12', 58]
                    ]
                }
            ]
        };


        // 5. 使用刚指定的配置项和数据显示图表。
        myChart2.setOption(option2)

        // 3. 基于准备好的dom，初始化echarts实例
        var myChart3 = echarts.init(document.getElementById('main3'));

        const option3 = {

            tooltip: {
                trigger: 'axis'
            },

            grid: {
                left: '-20%',
                right: '1%',
                bottom: '0%',
                top: '25%',
            },

            xAxis: {
                show: false,
                type: 'category',
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                show: false,
                type: 'value'
            },
            series: [

                {
                    name: 'Email',
                    type: 'line',
                    stack: 'Total',
                    data: [100, 32, 221, 14, 10, 33, 40]
                },
                {
                    name: 'Direct',
                    type: 'line',
                    stack: 'Total',
                    data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name: 'Search Engine',
                    type: 'line',
                    stack: 'Total',
                    data: [820, 932, 901, 934, 1290, 1330, 1320]
                }

            ]
        };


        // 5. 使用刚指定的配置项和数据显示图表。
        myChart3.setOption(option3)


        // 3. 基于准备好的dom，初始化echarts实例
        var myChart4 = echarts.init(document.getElementById('main4'));

        const option4 = {
            grid: {
                top: '2%',
                right: '0%',
                left: '7%',
                bottom: '5%'
            },
            xAxis: {
                type: 'category',
                data: [
                    '1月',
                    '2月',
                    '3月',
                    '4月',
                    '5月',
                    '6月',
                    '7月',
                    '8月',
                    '9月',
                    '10月',
                    '11月',
                    '12月'
                ]
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [270, 780, 1000, 500, 190, 510, 260, 430, 760, 511, 262, 390],
                    type: 'bar'
                }
            ]
        };


        // 5. 使用刚指定的配置项和数据显示图表。
        myChart4.setOption(option4)





    },

    data() {
        return {
            activeIndex: 1,

        }
    },

    methods: {

        // 处理 tab 切换
        handleChange() {
            this.activeIndex = 1
        },

    },
}
</script>

<style lang="less" scoped>
.box {
    padding: 10px;

    .header {
        .t-card {
            height: 220px;
        }

        .title {
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            /* 水平方向上分别靠左和靠右对齐 */
            align-items: center;
            /* 垂直方向上居中对齐 */

            span {
                font-size: 12px;
                color: #A2A09B;
            }

            .t-icon {
                color: #A2A09B;
            }

            .t-icon:hover {
                color: #000;
                cursor: pointer;
            }

        }

        .number {
            margin-top: 40px;
            font-size: 23px;
        }

        .change {
            padding-top: 20px;
            height: 30px;

            span {
                font-size: 12;
                color: #A2A09B;
                margin-right: 5px;
            }

            .t-icon-caret-up-small {
                color: #9AD775;
            }

            .t-icon-caret-down-small {
                color: #E55451;
            }
        }

        .t-divider {
            margin-bottom: 4px;
        }

    }

    .body {
        margin: 10px 0;

        .ranking {
            margin-bottom: 10px;
        }

    }
}
</style>